import React from 'react';
import { useLocation } from 'react-router-dom';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './RouteTransition.css';

interface RouteTransitionProps {
  children: React.ReactNode;
}

/**
 * 路由过渡动画组件
 * 在路由切换时提供平滑的过渡效果
 * 
 * @param children 子组件内容
 * @returns 带有过渡效果的组件
 */
const RouteTransition: React.FC<RouteTransitionProps> = ({ children }) => {
  const location = useLocation();
  
  return (
    <TransitionGroup className="transition-wrapper">
      <CSSTransition
        key={location.pathname}
        classNames="fade"
        timeout={300}
      >
        <div className="route-content">
          {children}
        </div>
      </CSSTransition>
    </TransitionGroup>
  );
};

export default RouteTransition; 